<template>
  <div class="logo-card">
    <img src="@/assets/images/logo.png" />
    <span>七尾医疗服务后台</span>
  </div>
  <el-menu
    router
    active-text-color="#fff"
    background-color="#187bfd"
    text-color="#fff"
    default-active="/"
  >
    <template v-for="v in navList">
      <template v-if="v.child">
        <el-sub-menu :index="v.title">
          <template #title>
            <span :class="v.icon"></span>
            <span>{{ v.title }}</span>
          </template>
          <el-menu-item v-for="c in v.child" :index="c.path">
            {{ c.title }}
          </el-menu-item>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index="v.path">
          <span :class="v.icon"></span>
          {{ v.title }}
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const navList = reactive([
  {
    title: '首页',
    icon: 'iconfont icon-shouye',
    path: '/'
  },
  {
    title: '预约管理',
    icon: 'iconfont icon-yuyue',
    path: '',
    child: [
      {
        title: '预约挂号',
        path: '/registered'
      },
      {
        title: '预约核酸检测',
        path: '/nucleicAcidTesting'
      },
      {
        title: '预约体检',
        path: '/medicalExamination'
      },
      {
        title: '医生排班',
        path: '/doctorScheduling'
      }
    ]
  },
  {
    title: '费用管理',
    icon: 'iconfont icon-feiyong',
    path: '',
    child: [
      {
        title: '门诊消费记录',
        path: '/outpatientConsumptionRecords'
      },
      {
        title: '门诊充值记录',
        path: '/outpatientTopUpRecords'
      },
      {
        title: '住院消费记录',
        path: '/hospitalizationConsumptionRecords'
      },
      {
        title: '住院充值记录',
        path: '/inpatientRechargeRecord'
      },
      {
        title: '退款记录',
        path: '/refundHistory'
      }
    ]
  },
  {
    title: '医院信息',
    icon: 'iconfont icon-yiyuan',
    child: [
      {
        title: '医生管理',
        path: '/physicianManagement'
      },
      {
        title: '科室管理',
        path: '/departmentManagement'
      },
      {
        title: '体检套餐',
        path: '/medicalCheckUpPackage'
      },
      {
        title: '健康百科',
        path: '/encyclopediaOfHealth'
      },
      {
        title: '医院导航',
        path: '/hospitalNavigation'
      },
      {
        title: '医院简介',
        path: '/hospitalProfile'
      },
      {
        title: '预约须知',
        path: '/appointmentInstructions'
      }
    ]
  },
  {
    title: '系统设置',
    icon: 'iconfont icon-shezhi',
    child: [
      {
        title: '管理员管理',
        path: '/adminManage'
      },
      {
        title: '角色管理',
        path: '/roleManagement'
      },
      {
        title: '职称管理',
        path: '/titleManagement'
      },
      {
        title: '消息公告',
        path: '/messageAnnouncement'
      },
      {
        title: '修改密码',
        path: '/changePassword'
      }
    ]
  }
])
</script>
<style lang="less" scoped>
.logo-card {
  background: #187bfd;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    color: #fff;
    font-size: 18px;
  }
}
.el-menu {
  border: none;
  min-height: calc(100vh - 64px);
  .iconfont {
    margin-right: 10px;
  }
}
</style>
